<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../dist/w2ui.css" />
<script type="text/javascript" src="../libs/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../src/w2utils.js"></script>
<script type="text/javascript" src="../src/w2tabs.js"></script>
<script type="text/javascript" src="../src/w2toolbar.js"></script>
<script type="text/javascript" src="../src/w2field.js"></script>
<script type="text/javascript" src="../src/w2popup.js"></script>
<script type="text/javascript" src="../src/w2grid.js"></script>
<script>
//<![CDATA[
$(function () {
    $('#grid').w2grid({
        name: 'grid',
        show: {
                toolbar: true,
                footer: true,
                toolbarSave: true,
                toolbarSearch: true
                },
        columns: [
            { field: 'lname', caption: 'Last Name', size: '30%', editable: { type: 'text' }  },
            { field: 'fname', caption: 'First Name', size: '30%', editable: { type: 'text' } },
            { field: 'email', caption: 'Email', size: '40%', editable: { type: 'text' } },
            { field: 'sdate', caption: 'Start Date', size: '90px', editable: { type: 'text' } }
        ],
        records: [
            { recid: 1, fname: 'John', lname: 'doe', email: 'jdoe@gmail.com', sdate: '4/3/2012', w2ui: { children: [] }},
            { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012',
                w2ui: {
                    children: [
                        { recid: 21, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
                        { recid: 22, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012',
                            w2ui: {
                                children: [
                                    { recid: 221, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
                                    { recid: 222, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012',
                                        w2ui: {
                                            children: [
                                                { recid: 2221, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
                                                { recid: 2222, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
                                                { recid: 2223, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
                                                { recid: 2224, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
                                            ]
                                        }
                                    },
                                    { recid: 223, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
                                    { recid: 224, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
                                ]
                            }
                        },
                        { recid: 23, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
                        { recid: 24, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
                    ]
                }
            },
            { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012',
                w2ui: {
                    children: [
                        { recid: 11, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
                        { recid: 12, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
                        { recid: 13, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
                        { recid: 14, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
                    ]
                }
            },
            { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012', w2ui: { children: [] } },
            { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012', w2ui: { children: [] } },
            { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012',
                w2ui: {
                    children: [
                        { recid: 61, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
                        { recid: 62, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
                        { recid: 63, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
                        { recid: 64, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
                    ]
                }
            },
            { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012', w2ui: { children: [] } },
            { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012', w2ui: { children: [] } }
        ]
    });
});
//]]>
</script>
</head>
<body>
    <div id="grid" style="width: 100%; height: 400px;"></div>
</body>
</html>
